<template>
  <div>
    <div><h2>AI接口</h2></div>
    <div>
      <el-card class="box-card">
        <strong>接口总览</strong>
        <div>
          <el-table :data="interfaceData" :stripe="true" style="width: 100%">
            <el-table-column prop="network" label="网络" width="350" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.img" alt="" />
                <!-- <img src="@/assets/images/interface1.png" alt=""> -->
              </template>
            </el-table-column>
            <el-table-column label="状态" width="480" >
              <template slot-scope="scope">
                <div class="state">
                  <div>
                    <span>运行时间:</span>
                    <span>{{ scope.row.runTime }}</span>
                  </div>
                  <div>
                    <span>MAC地址:</span>
                    <span>{{ scope.row.MACaddress }}</span>
                  </div>
                  <div>
                    <span>接收:</span>
                    <span>{{ scope.row.receive }}</span>
                  </div>
                  <div>
                    <span>发送:</span>
                    <span>{{ scope.row.send }}</span>
                  </div>
                  <div>
                    <span>IPv4:</span>
                    <span>{{ scope.row.IPv4 }}</span>
                  </div>
                  <div>
                    <span>IPv6:</span>
                    <span>{{ scope.row.IPv6 }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              prop="network"
              label="网络"
              align="center"
            >
              <template>
                <el-button class="connect" size="medium">连接</el-button>
                <el-button class="close" size="medium">关闭</el-button>
                <el-button class="change" size="medium">修改</el-button>
                <el-button class="delete" size="medium">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 添加按钮 -->
        <el-button class="add" size="medium">添加新接口...</el-button>
      </el-card>
      <br />
      <div>
        <el-card shadow="always">
          <strong>全局网络选项</strong>
          <div class="input">
            IPv6 ULA前缀
            <el-input
              v-model="ULAdata"
              placeholder=""
              size="normal"
              style="width: 30%"
            ></el-input>
          </div>
        </el-card>
      </div>
    </div>
    <el-divider></el-divider>
    <div style="text-align: right">
      <el-button class="use" size="medium">保存&应用</el-button>
      <el-button class="save" size="medium">保存</el-button>
      <el-button class="reset" size="medium">复位</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 接口数据
      interfaceData: [
        {
          img: "http://localhost:8080/static/img/interface1.61a4629b.png",
          runTime: "4h 59m 30s",
          MACaddress: "08:00:27:81:73:D8",
          receive: "1.48MB(17881数据包)",
          send: "5.63MB(12051数据包)",
          IPv4: "192.168.56.5/24",
          IPv6: "fddcd3a0:de3b:1/60",
        },
        {
          img: "",
          runTime: "4h 59m 30s",
          MACaddress: "08:00:27:81:73:D8",
          receive: "1.48MB(17881数据包)",
          send: "5.63MB(12051数据包)",
          IPv4: "192.168.56.5/24",
          IPv6: "fddcd3a0:de3b:1/60",
        },
      ],
      //前缀数据
      ULAdata: "fddc:d3a0:de3b::/48",
    };
  },
};
</script>

<style scoped>
.connect {
  background: blueviolet;
  color: #fff;
}
.close {
  background: springgreen;
  color: #fff;
}
.change {
  background: slateblue;
  color: #fff;
}
.delete {
  background: tomato;
  color: #fff;
}
.input {
  position: relative;
  left: 190px;
}
.add {
  background: blueviolet;
  color: #fff;
  position: relative;
  top: 10px;
}
/*  */
.use {
  background: slateblue;
  color: #fff;
}
.save {
  background: blueviolet;
  color: #fff;
}
.reset {
  background: springgreen;
  color: #fff;
}
</style>